<template>
  <dv-border-box-11 title="星云教育数据中台">
      <!-- 右侧班级所有人的姓名 -->
      <div class="SiderBar">
        <SiderBar/>
      </div>
    <div class="container">
      <div class="LeftComponent">
        <!-- 左侧内容 -->
        <LeftComponent />
      </div>
      <div class="RightComponents">
        <!-- 右侧内容 -->
        <RightComponents />
      </div>
    </div>
  </dv-border-box-11>
</template>

<script>
import LeftComponent from "./Left/LeftComponents.vue";
import RightComponents from "./Right/RightComponents.vue";
import SiderBar from "./SiderBar.vue";

export default {
  name: "PersonalComponent",
  components: {
    SiderBar,
    LeftComponent,
    RightComponents,
  },
};
</script>

<style scoped>
.container {
  position: relative;
  top: 1rem;
  transform: scale(0.98);
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 95vh; /* 设置容器高度 */
  box-sizing: content-box;
  margin:0 20px;

  overflow: hidden;
  /* position: relative; */
  /* border-radius: 10px; */
  /* background-color: rgba(240, 212, 178, 0.516); */

  /* background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 1px solid rgba(255, 255, 255, 0.25); */
}
.SiderBar{
  position: absolute;
  z-index: 99;
  top:35px;
  right:35px;
}

.LeftComponent {
  flex: 4; /* 左侧宽度比例为3 */
  /* background-color: #cce5ff; */
  margin: 60px 10px 20px 20px;
  padding-left:10px;
  /* border-radius: 10px; */

  /* background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}

.RightComponents {
  flex: 6; /* 右侧宽度比例为7 */
  margin: 20px;
  margin-left: 10px;
  margin-top: 60px;
  /* background-color: #f0f0f0;  */
  border-radius: 10px;
}
</style>
